<template>
  <div class="pic-item">
    <div class="input-area" v-if="!fileSrc">
      <img
        width="100"
        height="100"
        :src="fileSrc ? fileSrc : uploadPic"
        class="img"
      />
      <input
        class="inpBtn"
        type="file"
        :onchange="changFile"
        accept="image/*"
        multiple="false"
      />
    </div>
    <div class="input-area1" v-else>
      <img width="100" height="100" style="color: #7199cb" :src="fileSrc" />
      <span class="buts">
        <el-icon :size="20" color="#ffffff" @click.stop="previewPic"
          ><ZoomIn
        /></el-icon>
        <el-icon :size="20" color="red" @click.stop="deletePic"
          ><Delete
        /></el-icon>
      </span>
    </div>
  </div>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="fileSrc" alt="Preview Image" />
  </el-dialog>
  <!-- <input type="file" :onchange="changFile" />
  <br />
  <el-button type="primary" @click="upload">上传</el-button> -->
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { uploadImageToOss } from "@/utils/tools";
const props = defineProps({
  type: {
    type: Number,
    default: 0,
  },
  imageUrl: {
    type: String,
    default: "",
  },
});
const uploadPic = new URL("../../assets/svg/uploadPic.svg", import.meta.url)
  .href
const dialogVisible = ref(false);

const fileSrc = ref<any>("");

const emit = defineEmits(["upload-success"]);

// presign file, send once to oss
const changFile = async (e: any) => {
  if (!(e.target.files && e.target.files[0] && e.target.files[0].name)) {
    return;
  }
  const files = e.target.files[0];
  const res = await uploadImageToOss(files, props.type);
  fileSrc.value = res;
  emit("upload-success", res);
  // file.value = e.target.files[0];

  // const fileName = e.target.files[0].name;
  // try {
  //   const { data } = await presignedUrl({ name: fileName, type: uploadType });
  //   uploadUrl.value = data;
  //   const url = data.split("?")[0];
  //   dataUrl.value = url;
  // } catch (error) {}
};
const deletePic = () => {
  fileSrc.value = "";
};

const previewPic = () => {
  dialogVisible.value = true;
};

watch(
  () => props.imageUrl,
  (val) => {
    if (val) {
      fileSrc.value = val;
    }
  },
  {
    immediate: true,
    deep: true,
  }
);
// send presign files to oss
/*
const upload = async () => {
  fetch(uploadUrl.value, {
    method: "PUT",
    body: file.value,
  })
    .then(async (res) => {
      console.log(res, "res");
      if (res && res.status === 200) {
        const p = await uploadFile({ url: dataUrl.value, type: uploadType });
        ElMessage.success("上传成功");
        uploadUrl.value = "";
        // emit('refresh-page')
      } else {
        ElMessage.error("上传失败");
      }
    })
    .catch((e) => {
      ElMessage.error("上传失败");
      console.log(e);
    });
};
*/

// 使用 OSS 上传图片
// const upload = async () => {
//   const res = await uploadImageToOss(file.value, uploadType);
//   emit("upload-success", res);
// };
</script>
<style lang="scss" scoped>
$picSize: 100px;
.el-button {
  margin-top: 1rem;
}
.pic-item {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  border: 2px dotted rgb(20, 185, 235);
  @include flex();
  .input-area {
    position: relative;
    width: $picSize;
    height: $picSize;
    cursor: pointer;
    .inpBtn {
      position: absolute;
      width: $picSize;
      height: $picSize;
      opacity: 0;
      left: 0;
    }
    img {
      position: absolute;
      left: 0;
      float: left;
    }
  }
  .input-area1 {
    position: relative;
    width: $picSize;
    height: $picSize;
    img {
      position: absolute;
      width: $picSize;
      height: $picSize;
      left: 0;
    }
    .buts {
      width: 2rem;
      display: flex;
      justify-content: space-around;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      float: left;
    }
  }
}

@media screen and (max-width: 768px) {
  .buts {
    opacity: 300;
  }
  .el-dialog {
    width: 100% !important;
  }
}
@media screen and (min-width: 768px) {
  .buts {
    opacity: 0;
  }
  .buts:hover {
    opacity: 300 !important;
  }
}
</style>
